<template>
  <van-uploader v-show="flag" :multiple="true"
                :upload-icon="uploadIcon"
                v-model="fileList"
                :upload-text="uploadText"
                :after-read="afterRead"
                :before-delete="beforeDelete"
                :max-count="1"
  />
</template>

<script>
import {multipleFilesUpload, delSpeciFiedFile} from "@/https/http";
import {Toast} from "vant";

export default {
  name: "FileUpload",
  props: {
    uploadIcon: {
      type: String,
      default: "require('@/assets/iconfont/id_front.png')"
    },
    uploadText: {
      type: String,
      default: "请选择上传的文件"
    },
    fileBelongCategory: {
      type: String,
      default: 'wx_pic'
    }
  },
  data() {
    return {
      flag: true,
      fileList: []
    }
  },
  methods: {
    //删除指定文件
    beforeDelete(file) {

      delSpeciFiedFile({
        handleFileName: file.handleFileName,
        fileBelongCategory: file.fileBelongCategory,
        picNumber: file.picNumber
      }).then((res) => {
        if (res.success) {
          for (var i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].picNumber === file.picNumber) {
              this.fileList.splice(i, 1);
            }
          }
          Toast('文件删除成功！');
        }
      })
    },

    //单/多文件公用上传方法
    afterRead(file) {

      //初始化文件传输容器
      let formdata = new FormData()
      if (file instanceof Array && file.length) {
        // 判断是否是多图上传 多图则循环添加进去
        file.forEach((item, i) => {
          formdata.append('files', item.file)
          this.fileList.push({url: i, status: 'uploading', message: '上传中...'})
        })
      } else {
        //单文件上传
        formdata.append('files', file.file)
        this.fileList.push({url: "", status: 'uploading', message: '上传中...'})
      }

      //开始执行 单/多文件上传
      multipleFilesUpload(formdata).then((res) => {
        this.fileList = []
        if (res.success) {
          for (let i in res.content) {
            this.fileList.push({
              url: res.content[i].previewUrl,
              handleFileName: res.content[i].handleFileName,
              fileBelongCategory: res.content[i].fileBelongCategory,
              picNumber: res.content[i].picNumber,
              status: 'done',
              message: '上传成功'
            })
          }
        }
      });
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-uploader__upload,
/deep/ .van-image,
/deep/ .van-uploader__preview-image {
  width: 44vw;
  height: 110px;
}

/deep/ .van-uploader__upload-text {
  margin-top: 8px;
  color: #969799;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #1da4f2;
  color: #fff;
  text-align: center;
}

/deep/ .van-uploader__upload,
/deep/ .van-image {
  background: #E8F6FE;
  border-radius: 10px;
  overflow: hidden;
}

/deep/ .van-icon__image {
  width: 4em;
  height: 3em;
  -o-object-fit: contain;
  object-fit: contain;
  margin-bottom: 23px;
}


</style>
